<template>
  <div id="teamCardList">

  <van-card
      v-for="team in teamList"
      :desc="team.description"
      :title="team.name"
      :thumb="yupao"
  >
    <template #tags>
      <van-tag plain type="primary" color="green" style="margin: 4px">
        {{teamStatusEnum[team.status]}}
      </van-tag>
    </template>
    <template #bottom>
     <div>
       {{'最大人数:'+team.maxNum}}
     </div>
      <div v-if="team.expireTime">
        {{'过期时间:'+formatDate(team.expireTime)}}
      </div>
      <div>
        {{'创建时间:'+formatDate(team.createTime)}}
      </div>
    </template>
    <template #footer>
      <van-button v-if="loginUser && JSON.stringify(loginUser?.id) === JSON.stringify(team.userId)" size="mini" color="orange" @click="updateTeam(team.id)">更新队伍</van-button>
      <van-button v-if="!joinTeamIncludeIds.includes(String(team.id))" size="mini" color="green" @click="joinTeam(team.id)">加入队伍</van-button>
      <van-button v-if="loginUser && JSON.stringify(loginUser?.id) === JSON.stringify(team.userId)"  size="mini" color="black" @click="releaseTeam(team.id)">解散队伍</van-button>
      <van-button v-if="joinTeamIds.includes(String(team.id))" size="mini" color="red" @click="quitTeam(team.id)">退出队伍</van-button>
    </template>
  </van-card>
  </div>
</template>
<script setup lang="ts">
import {TeamType} from "../models/team";
import {defineProps, onMounted, ref} from "vue";
import {teamStatusEnum} from "../../constants/team";
import {formatDate} from "../../utils/Date";
import yupao from "../assets/yupao.png"
import myAxios from "../plugins/myAxios.js"
import {useRouter} from "vue-router";
import {getCurrentUser} from "../services/user";
import {UserType} from "../models/user";
import {showFailToast, showSuccessToast} from "vant";

const router = useRouter();
//定义接口
interface TeamCardListPros{
    teamList:TeamType[]
}

//接收父组件传递来的值
defineProps<TeamCardListPros>()

//获取当期登录用户
const loginUser=ref<UserType>()

//收集自己加入队伍的id
const joinTeamIds=ref<String[]>([])

//收集自己加入队伍的id(包含自己)
const joinTeamIncludeIds=ref<String[]>([])



onMounted(async ()=>{
  //获取登录用户信息 一定要加上await 不然获取的是一个axios封装的对象
  loginUser.value=await getCurrentUser()

  //获取自己加入的队伍(不包含自己)
  const joinTeamList =await myAxios.get('/team/list/my/join');
  if (joinTeamList.code===0 && joinTeamList.data){
     joinTeamIds.value=joinTeamList.data.map((team:TeamType)=>String(team.id))
  }

  //获取自己加入的队伍（包含自己）
  const joinTeamIncludeList =await myAxios.get('/team/list/my/join/include');
  if (joinTeamIncludeList.data && joinTeamIncludeList.code===0){
    joinTeamIncludeIds.value=joinTeamIncludeList.data.map((team:TeamType)=>String(team.id))
  }
})



//加入队伍
const joinTeam=async (teamId:number)=>{
  const res=await myAxios.post("/team/join",{
    teamId:teamId
  })
  if (res.code===0 && res.data){
    showSuccessToast("加入队伍成功")
    await router.push("/")
  }else {
    showSuccessToast("加入队伍失败,"+res.message? `${res.message}`:``)
  }
}

//更新队伍跳转页面
const updateTeam=(id:number)=>{
  router.push({
    path: '/team/update',
    query:{
      id
    }
  })
}

//解散队伍
const releaseTeam=async (id)=>{
  if (id<=0){
    showFailToast('操作失败,请重试')
    return
  }
 const res=await myAxios.post('/team/release',{
   teamId:id
 })
  if (res.code===0 && res.data){
    // todo 后续需要优化刷新页面
    await router.push("/")
    showSuccessToast('操作成功,队伍已解散')
  }else {
    showFailToast('操作失败,'+res.message)
  }
}



//退出队伍
const quitTeam=async (id)=>{
  if (id<=0){
    showFailToast('操作失败,请重试!')
    return
  }
  const res=await myAxios.post('/team/quit',{
    teamId:id
  })
  if (res.code===0 && res.data){
    showSuccessToast('操作成功,队伍已退出!')
    await router.push("/")
  }else {
    showFailToast('操作失败,'+res.message)
  }
}


</script>

<style scoped>
#teamCardList :deep(.van-image__img){
  height: 128px;
  object-fit: unset;
}

</style>